<!-- 积分余额 -->
<template>
    <view class="page_box">
        <view class="head_box padding">
            <cu-custom :isBack="true">
                <block slot="backText"></block>
                <block slot="content"></block>
            </cu-custom>
            <image class="bg" :src="$IMG_URL + '/imgs/user/integral_bg.png'" mode=""></image>
            <view class="all-box x-c ">
                <view class="all-num flex ">
                    <!-- <text class="all-title">当前积分</text> -->
                    <text class="text-lg">当前佣金 : {{ score }}</text>
                </view>
                <!-- <text class="all-title">当前积分</text> -->
            </view>
            <view class="card-box">
                <button class="cu-btn cash-btn1 flex justify-center" @tap="onWithdrawals1"><text>佣金提现</text></button>
            </view>

            <!-- <view class="resale-list x-bc" @tap="jump('/pages/user/wallet/bind-bank')">
				<view class="x-f">
					<text class=" cuicon cuIcon-vipcard"></text>
					<text>绑定银行卡</text>
				</view>
				<text class="cuIcon-right"></text>
			</view> -->
            <view class="tab-box x-f">
                <view class="tab-item y-f " @tap="onTab('all')"><text class="tab-name" :class="{ 'tab-active': tabDot === 'all' }">全部</text></view>
                <view class="tab-item y-f " @tap="onTab('add')"><text class="tab-name" :class="{ 'tab-active': tabDot === 'add' }">收入</text></view>
                <view class="tab-item y-f " @tap="onTab('reduce')">
                    <text class="tab-name" :class="{ 'tab-active': tabDot === 'reduce' }">支出</text>
                </view>
            </view>
        </view>
        <shopro-modal v-model="showModal1" style="z-index: 88;">
            <block slot="modalContent">
                <view class="modal-box">
                    <view class="modal-head">
                        <image class="modal-head-img" src="http://shopro.7wpp.com/imgs/modal_bg.png" mode=""></image>
                        <text class="modal-head-title">提现佣金</text>
                    </view>
                    <input class="inp" type="number" v-model="score1" placeholder="请输入提现金金额" placeholder-class="pl-inp" />
                    <input class="inp" type="number" v-model="mobile" placeholder="请输入提现接收银行卡" placeholder-class="pl-inp" />

                    <button class="cu-btn post-btn" @tap="postMoney1">提现</button>
                </view>
            </block>
        </shopro-modal>
        <view class="content_box">
            <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
                <view class="item-box x-bc" v-for="log in scoreLog" :key="log.id">
                    <view class="y-start">
                        <view class="name">{{ log.type_name }}</view>
                        <view class="time">{{ timestamp(log.createtime) }}</view>
                    </view>
                    <view class="num" v-if="log.wallet >= 0">{{ log.wallet }}</view>
                    <view class="num" v-else>{{ log.wallet }}</view>
                </view>
                <!-- 更多 -->
                <u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
            </scroll-view>
        </view>
        <view class="foot_box"></view>
        <!-- 自定义底部导航 -->
        <shopro-tabbar></shopro-tabbar>
        <!-- 关注弹窗 -->
        <shopro-float-btn></shopro-float-btn>
        <!-- 连续弹窗提醒 -->
        <shopro-notice-modal></shopro-notice-modal>
    </view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
    components: {},
    data() {
        return {
            tabDot: 'all',
            scoreLog: [],
            timestamp: this.$tools.timestamp,
            loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            currentPage: 1,
            lastPage: 1,
            showModal1: false,
            score1: '',
            mobile: '',
        };
    },
    computed: {
        ...mapState({
            score: state => state.user.userInfo.kt_money,
        }),
    },
    onLoad() {
        
        this.getScoreLog();
    },
    methods: {
        apply1() {
            if ([this.score1, this.mobile].includes('')) {
                return this.$tools.toast('请填写全部信息');
            }
            var that = this;
            that.$api('user_wallet_apply.apply', {
                money: that.score1,
                mobile: that.mobile,
            }).then(res => {
                console.log('res :>> ', res);
                if (res.code === 1) {
                    //  #ifdef MP-WEIXIN
                    this.$store.dispatch('getMessageIds', 'wallet');
                    //  #endif
                    this.$tools.toast(res.msg);
                    setTimeout(() => {
                        this.jump('/pages/index/user');
                    }, 1500);
                }
                // this.score();
                [this.score1, this.mobile] = ['',''];
            });
        },
        postMoney1() {
            this.apply1();
            this.showModal1 = false;
        },
        loadMore() {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.getScoreLog();
            }
        },
        onTab(type) {
            this.tabDot = type;
            this.scoreLog = [];
            this.currentPage = 1;
            this.$u.debounce(this.getScoreLog);
        },
        onWithdrawals1() {
            if (this.score <= 0) {
                this.$tools.toast('暂无可提现佣金');
            } else {
                this.showModal1 = true;
            }
        },
        // 积分明细
        getScoreLog(type) {
            let that = this;
            that.loadStatus = 'loading';
            that.$api('user_wallet_log', {
                wallet_type: 'kt_money ',
                status: that.tabDot,
                page: that.currentPage,
            }).then(res => {
                if (res.code === 1) {
                    that.scoreLog = [...that.scoreLog, ...res.data.data];
                    that.lastPage = res.data.last_page;
                    if (that.currentPage < res.data.last_page) {
                        that.loadStatus = 'loadmore';
                    } else {
                        that.loadStatus = 'nomore';
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss">
.resale-list {
    height: 96rpx;
    background: #fff;
    padding: 0 30rpx 0 40rpx;
    border-bottom: 1rpx solid #dfdfdf;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);

    .cuicon {
        font-size: 40rpx;
        color: #666;
        margin-right: 30rpx;
    }
}
.modal-box {
    background: #fff;
    width: 610rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    .modal-head-img {
        width: 100%;
        height: 213rpx;
    }

    .modal-head-title {
        font-size: 35rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6d5028;
        line-height: 42rpx;
    }

    .inp {
        width: 501rpx;
        height: 78rpx;
        border: 1rpx solid rgba(168, 112, 13, 1);
        // margin: 60rpx auto 40rpx;
        margin: 0 auto;
        margin-top: 30rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6d5028;

        .pl-inp {
            color: #bd9560;
        }
    }

    .radio {
        width: 500rpx;
        padding: 0 50rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(200, 150, 61, 1);
        margin-bottom: 20rpx;

        .radio-inp {
            transform: scale(0.7);
            margin-right: 10rpx;
        }
    }

    .post-btn {
        width: 492rpx;
        height: 70rpx;
        background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
        box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
        border-radius: 35rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        padding: 0;
        margin-bottom: 60rpx;
        margin-top: 30rpx;
    }
}
.scroll-box {
    flex: 1;
    height: 100%;
    padding: 0 30rpx;
}
.cash-btn1 {
    position: absolute;
    left: 50%;
    bottom: 150rpx;
    transform: translateX(-50%);
    width: 180rpx;
    height: 60rpx;
    background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
    border: 2rpx solid rgba(230, 184, 115, 1);
    box-shadow: 0px 7px 6px 0px rgba(229, 138, 0, 0.22);
    border-radius: 32rpx;
    padding: 0;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
}
.page_box {
    background: #fff;
    .head_box {
        width: 750rpx;
        height: 450rpx;
        background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 56.99999999999999%, rgba(255, 255, 255, 1) 100%);
        position: relative;
        .bg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 310rpx;
            height: 310rpx;
        }
        .all-box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -70%);

            height: 180rpx;
            .all-num {
                font-size: 50rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #a8700d;
                margin-bottom: 20rpx;
            }
            .all-title {
                position: absolute;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(168, 112, 13, 1);
                line-height: 54rpx;
                text-align: center;
                width: 154rpx;
                height: 53rpx;
                background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
                border-radius: 27rpx;
                bottom: -16rpx;
            }
        }
        .tab-box {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 710rpx;
            height: 90rpx;
            background: rgba(255, 255, 255, 1);
            border-radius: 30rpx 30rpx 0px 0px;
            border-bottom: 1rpx solid #dfdfdf;
            padding: 0 30rpx;
            .tab-item {
                flex: 1;
                .tab-name {
                    font-size: 30rpx;
                    font-family: Noto Sans S Chinese;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    border-bottom: 4rpx solid transparent;
                    line-height: 86rpx;
                }
                .tab-active {
                    border-bottom: 4rpx solid rgba(213, 166, 90, 1);
                }
            }
        }
    }
}
.item-box {
    background: #fff;
    min-height: 150rpx;
    border-bottom: 1rpx solid #dfdfdf;
    padding: 30rpx;
    .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 28rpx;
        margin-bottom: 20rpx;
    }
    .time {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(196, 196, 196, 1);
        line-height: 24px;
    }
    .num {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #e6b873;
    }
}
</style>
